<h1>calendar+dropdown</h1>
<h2>calendar</h2>
<div class="ui-g">
    <div class="ui-g-12 ui-md-4">
        <h3>Basic</h3>
        <p-calendar [(ngModel)]="date1"></p-calendar> {{date1|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Spanish</h3>
        <p-calendar [(ngModel)]="date2" [locale]="es" dateFormat="dd/mm/yy"></p-calendar> {{date2|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Icon</h3>
        <p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar> <span style="margin-left:35px">{{date3|date}}</span>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Min-Max</h3>
        <p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar> {{date4|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Disable Days</h3>
        <p-calendar [(ngModel)]="date5" tabindex="0" [disabledDates]="invalidDates" [disabledDays]="[0,6]" readonlyInput="readonlyInput"></p-calendar> {{date5|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Navigators</h3>
        <p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar> {{date6|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Time</h3>
        <p-calendar [(ngModel)]="date7" [showTime]="true"></p-calendar> {{date7}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Time Only </h3>
        <p-calendar [(ngModel)]="date8" [timeOnly]="true"></p-calendar>
    </div>
</div>
<h3>Inline {{date8|date}}</h3>
<p-calendar [(ngModel)]="date9" [inline]="true"></p-calendar>

<h2>slider</h2>
<h3 class="first">Basic: {{val1}}</h3>
<p-slider [(ngModel)]="val1" [style]="{'width':'200px'}"></p-slider>
<h3>Input: {{val2}}</h3>
<input type="text" pInputText [(ngModel)]="val2" style="width:190px"/>
<p-slider [(ngModel)]="val2" [style]="{'width':'200px'}"></p-slider>
<h3>Animate: {{val3}}</h3>
<p-slider [(ngModel)]="val3" [style]="{'width':'200px'}" [animate]="true"></p-slider>
<h3>Step: {{val4}}</h3>
<p-slider [(ngModel)]="val4" [style]="{'width':'200px'}" [step]="20"></p-slider>
<h3>Range: {{rangeValues[0] + ' - ' + rangeValues[1]}}</h3>
<p-slider [(ngModel)]="rangeValues" [style]="{'width':'200px'}" [range]="true"></p-slider>
<h3>Vertical: {{val5}}</h3>
<p-slider [(ngModel)]="val5" [style]="{'height':'200px'}" orientation="vertical"></p-slider>
